import React, {useState} from 'react';
import {Button, StyleSheet, Text, TextInput, View} from 'react-native';
import {useDispatch, useSelector} from 'react-redux';
import {
  decrement,
  increment,
  incrementByAmount,
} from '../store/features/counterSlice';
import _ from 'loadsh';
const Counter = () => {
  const {value} = useSelector(store => store.counter);
  const dispatch = useDispatch();
  const [amount, setAmount] = useState(1);
  return (
    <View style={styles.container}>
      <Text>{value}</Text>
      <TextInput
        style={styles.textInput}
        value={amount}
        onChangeText={text => {
          setAmount(_.parseInt(text));
        }}
        placeholder={'请输入数量！'}
      />
      <View style={styles.btns}>
        <Button title={'加+'} onPress={() => dispatch(increment())} />
        <Button title={'减-'} onPress={() => dispatch(decrement())} />
      </View>
      <Button
        title={'增加指定数量'}
        onPress={() => dispatch(incrementByAmount(amount))}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffffff',
  },
  textInput: {
    width: 200,
    height: 40,
    borderWidth: 1,
    borderColor: '#eeeeee',
    borderStyle: 'solid',
    borderRadius: 4,
    marginTop: 10,
    paddingLeft: 10,
  },
  btns: {
    flexDirection: 'row',
  },
});

export default Counter;
